import React from "react";
import styled from 'styled-components'

const Alarm = styled.div`
  display:flex;
  align-items:center;

  .circle {
    display:flex;
    justify-content:center;
    border-radius: 50%;
    border: 2px solid rgb(63, 163, 254);
    color: rgb(63, 163, 254);
    font-size:30px;
    width:50px;
    height:50px;
  },
  .no-alarm {
    border-color:rgb(63, 163, 254);
    color: rgb(63, 163, 254);
  }
  .alarm {    
    border-color: rgb(255, 10, 10);
    color: rgb(255, 10, 10);    
  }
  .disabled {
    border-color: #ccc;
    color: #ccc;
  }
`

function AlarmNode(props) {
	const {level_display, count, disabled} = props
	// console.log(props);
	return (
		<Alarm>
			<div className={`circle  ${count == 0 ? 'no-alarm' : 'alarm'}  ${disabled && 'disabled'}`}>
				{count || '√'}
			</div>
			<div style={{marginLeft: '10px'}}
			     className={`color: ${count == 0 ? 'no-alarm' : 'alarm'}  ${disabled && 'disabled'}`}>
				{level_display}
			</div>
		</Alarm>
	)
}

export default AlarmNode
